<template>
  <!-- 头部 -->
  <header>
    <van-nav-bar title="网易严选" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18"  @click="router.push('/search')"/>
        <van-icon name="shopping-cart-o" size="18" @click="router.push('/cart')" />
      </template>

      <template #left>
        <van-icon name="wap-home-o" size="18" @click="goBack" />
      </template>
    </van-nav-bar>
  </header>
  <!-- 中间 -->
  <main v-if="goodsDetail">
    <!-- 轮播图 -->
    <van-swipe class="detailList">
      <van-swipe-item v-for="item in goodsDetail.skuInfo.skuImageList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
      </van-swipe-item>

      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>

    <!-- 价格 -->
    <div class="goodPrice">
      <p>限时优惠</p>
      <p>
        <b style="font-size: 18px">￥</b>
        {{ goodsDetail.price }} <span>到手￥{{ goodsDetail.price }}<van-icon name="arrow" /></span>
      </p>
    </div>

    <div class="description">
      <div>
        <p>{{ goodsDetail.skuInfo.skuName }}</p>
        <div>
          <span>自营</span>
          <span><van-icon name="certificate" />网易严选</span>
        </div>
      </div>
      <div>
        <div>
          <p>100%</p>
          <div>好评率</div>
        </div>
        <div>
          <van-icon class="arrow" name="arrow" />
        </div>
      </div>
    </div>

    <!-- 邮费 购物反 -->
    <div class="keywordPrefix" @click="postageshow = true">
      <ul>
        <li>邮费:满99包邮<van-icon name="arrow" class="arrow" /></li>
        <li>
          <p>购物反：最高反<span style="color: red">14积分</span></p>
          <van-icon name="arrow" class="arrow" />
        </li>
      </ul>
    </div>

    <!-- 点击邮费弹出框 -->
    <div class="postage">
      <van-popup closeable v-model:show="postageshow" position="bottom" z-index="10" style="height: 50%">
        <div class="title">邮费</div>
        <p>满99包邮</p>
        <div class="content">
          本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
        </div>
      </van-popup>
    </div>

    <!-- 配送地址选择 -->
    <div class="keywordPrefix">
      <ul>
        <li @click="toCart">请选择规格数量<van-icon name="arrow" class="arrow" /></li>
        <li>
          <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="配送至："
            placeholder="请选择所在地区"
            @click="addressShow = true"
          />
          <van-popup v-model:show="addressShow" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择所在地区"
              :options="options"
              @close="addressShow = false"
              @finish="onFinish"
            />
          </van-popup>
        </li>
        <li>服务<van-icon name="arrow" class="arrow" /></li>
      </ul>
    </div>

    <div style="height: 52px"></div>
  </main>

  <!-- 购物车弹出框 -->
  <div class="van-popup" v-if="goodsDetail">
    <van-popup closeable v-model:show="show" position="bottom" z-index="10">
      <div class="info-con">
        <img :src="goodsDetail.skuInfo.skuDefaultImg" alt="" />
        <div>
          <p>限时优惠</p>
          <p>价格：￥{{ goodsDetail.skuInfo.price }} 到手￥{{ goodsDetail.price }}</p>
          <!-- 已选择属性写这里 -->
          <p>已选择：请选择规格数量</p>
        </div>
      </div>
      <div>
        <!-- 商品属性 -->
        <div class="attribute" v-for="(item, index) in goodsDetail.spuSaleAttrList" :key="item.id">
          <p>{{ item.saleAttrName }}</p>
          <ul>
            <van-tag
              plain
              type="primary"
              v-for="(attr, attrIndex) in item.spuSaleAttrValueList"
              :key="attr.id"
              :text-color="attr.isChecked === '1' ? 'red' : ''"
              @click="handelChoose(index, attrIndex)"
            >
              {{ attr.saleAttrValueName }}</van-tag
            >
          </ul>
        </div>

        <!-- 步进器 -->
        <div class="goodNum">
          <p>数量</p>
          <van-stepper v-model="count" />
        </div>
      </div>
    </van-popup>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <div><van-icon name="service-o" /></div>
    <div>立即购买</div>
    <div @click="toCart">加入购物车</div>
  </div>
</template>

<script lang="ts" setup>
import 'vant/es/notify/style'
import { reqGoodsDetail } from '@/api/goodsDetail'
import { reqShopping } from '@/api/toAddCart'
import { IGoodsDetail } from '@/types/phonedetail'
import { showNotify } from 'vant'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
//引入省市区数据
// @ts-ignore
import { useCascaderAreaData } from '@vant/area-data'
const router = useRouter()
// 存储商品详情数据
const goodsDetail = ref<IGoodsDetail>()
// id
const skuId = ref()

//#region  省市区相关
const addressShow = ref(false)
const fieldValue = ref('')
const cascaderValue = ref('')
const options = useCascaderAreaData()
const onFinish = ({ selectedOptions }: any) => {
  addressShow.value = false
  fieldValue.value = selectedOptions.map((option: any) => option.text).join('/')
}
//#endregion

//#region 购物车相关
//控制加入购物车弹框
const show = ref(false)
// 步进器数据
const count = ref(1)

//购物车内属性点击事件
const handelChoose = (index: number, attrIndex: number) => {
  if (goodsDetail.value) {
    goodsDetail.value.spuSaleAttrList[index].spuSaleAttrValueList.forEach((item, num) => {
      if (num === attrIndex) {
        item.isChecked = '1'
      } else {
        item.isChecked = '0'
      }
    })
  }
}
// 点击加入购物车
const toCart = async () => {
  if (show.value) {
    const params = {
      skuId: skuId.value,
      num: count.value
    }
    // 获取加入购物车
    const res = await reqShopping(params)
    if (res.code === 200) {
      showNotify({ type: 'success', message: '添加成功', duration: 2000 })
      show.value = false
    }
  } else {
    show.value = true
  }
}

//#endregion

//控制邮费弹窗
const postageshow = ref(false)

// 获取商品详情
const getCateDetail = async () => {
  // 定义获取商品详情
  const arr = [2, 12, 13, 21, 15, 4, 11, 17, 9, 10]
  const index = Math.ceil(Math.random() * 10)
  // 获取商品详情
  const res = await reqGoodsDetail(arr[index])
  if (res.code === 200) {
    skuId.value = arr[index]
    goodsDetail.value = res.data
  }
}

// 点击回去
const goBack = () => {
  router.push('/')
}

//
onMounted(() => {
  getCateDetail()
})
</script>

<script lang="ts">
export default {
  name: 'VDetail'
}
</script>

<style lang="scss" scoped>
:deep(.van-nav-bar__right){
  padding: 0 10px;
  
  i{  
    margin-right: 20px;

  }
}
main {
  background-color: rgb(214, 217, 219);
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

// 轮播图
.detailList {
  height: 375px;
  img {
    width: 100%;
    height: 100%;
  }
  .an-swipe-item {
    height: 200px;
  }
}

.goodPrice {
  background-color: rgb(250, 30, 50);
  color: white;

  padding: 10px 20px;
  p {
    &:first-child {
      font-size: 12px;
    }
    &:last-child {
      font-size: 24px;
      margin-top: 6px;
      font-weight: 600;
      span {
        display: inline-block;
        background-color: white;
        padding-left: 8px;
        font-weight: 900;
        line-height: 20px;
        color: red;
        font-size: 12px;
        border-radius: 10px;
      }
    }
  }
}

.van-popup {
  .goodNum {
    padding: 0 50px 0 20px;
    p {
      font-size: 14px;
    }
  }
  .info-con {
    padding: 20px 0 10px 15px;
    img {
      width: 98px;
      display: inline;
    }
    & > div {
      width: 170px;
      font-size: 14px;
      display: inline-block;
      position: relative;
      bottom: 10px;
      p {
        display: inline-block;
        &:first-child {
          font-size: 10px;
          padding: 2px 4px;
          background-color: #f48f18;
          border-radius: 3px;
        }
        &:nth-child(2) {
          color: red;
        }
      }
    }
  }
  .attribute {
    padding-left: 20px;
    p {
      font-size: 14px;
    }

    .van-tag {
      color: black;
      padding: 0px 15px;
      margin: 10px;
      font-size: 14px;
      height: 36px;
      line-height: 36px;
    }
  }
}
// 底部
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 12;
  height: 52px;
  border: 1px solid rgb(193, 189, 189);
  display: flex;
  justify-content: left;
  line-height: 52px;
  text-align: center;
  background-color: white;
  div {
    width: 148.5px;
    font-size: 14px;
    &:first-child {
      width: 78px;
      font-size: 25px;
    }
    &:nth-child(2) {
      border-left: 1px solid rgb(193, 189, 189);
      border-right: 1px solid rgb(193, 189, 189);
    }
    &:nth-child(3) {
      background-color: rgb(250, 30, 50);
      color: white;
    }
  }
}
.description {
  display: flex;
  background-color: white;
  padding: 10px 0;
  & > div {
    &:first-child {
      width: 259px;
      margin-left: 15px;
      p {
        font-size: 16px;
        font-weight: 900;
      }
      div {
        margin-top: 5px;
        span {
          font-size: 12px;
          color: gray;
          &:first-child {
            color: white;
            padding: 3px 6px;
            margin-right: 5px;
            font-size: 4px;
            border-radius: 10px;
            background-color: rgb(246, 56, 72);
          }
        }
      }
    }

    &:last-child {
      width: 89px;
      display: flex;
      text-align: center;
      & > div {
        &:first-child {
          p {
            font-size: 16px;
            color: red;
            font-weight: 800;
          }
          div {
            font-size: 12px;
            color: gray;
          }
        }
        &:last-child {
          color: gray;
          font-size: 16px;
          line-height: 38px;
        }
      }
    }
  }
}

//邮费弹窗框样式
.postage {
  .title {
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    height: 50px;
    border-bottom: 1px solid rgb(138, 135, 135);
    margin-bottom: 10px;
  }
  p {
    padding: 5px 30px;
    font-size: 16px;
  }
  .content {
    padding: 0 30px;
    font-size: 16px;
    color: rgba(179, 179, 177, 0.993);
  }
}
.van-cell {
  font-size: 14px;
  padding: 12px 15px 0 0;
}
.keywordPrefix {
  margin-top: 10px;
  background-color: white;
  li {
    &:not(:nth-child(1)) {
      border-top: 1.5px solid rgb(212, 206, 206);
    }
    .arrow {
      line-height: 48px;
      margin-right: 15px;
      font-size: 17px;
      color: #969799;
    }
    box-sizing: border-box;
    font-size: 14px;
    height: 48px;
    margin-left: 15px;
    line-height: 48px;
    display: flex;
    justify-content: space-between;
  }
}
//
.van-stepper {
  padding-bottom: 100px;
}

// 选中样式
.active {
  color: red;
  border-color: red !important;
}
</style>
